<template>
    <div class="main">
      <el-button @click="showForm" type="primary">新增产品需求</el-button>
      <el-row :gutter="20" class="product-list">
        <el-col :span="8" v-for="product in products" :key="product.id">
          <el-card :body-style="{ padding: '20px' }">
            <div class="card-content">
              <h3>{{ product.productName }}</h3>
              <p>月需求量: {{ product.monthlyDemand }} 吨</p>
              <p>年需求量: {{ product.yearlyDemand }} 吨</p>
              <el-button @click="deleteProduct(product.id)" type="danger" size="small">删除</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <el-dialog :visible.sync="formVisible" title="产品需求" @close="resetForm">
        <el-form :model="form" label-width="120px">
          <el-form-item label="农产品名称">
            <el-input v-model="form.productName"></el-input>
          </el-form-item>
          <el-form-item label="月需求量">
            <el-input type="number" v-model.number="form.monthlyDemand"></el-input>
          </el-form-item>
          <el-form-item label="年需求量">
            <el-input type="number" v-model.number="form.yearlyDemand"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="saveProduct" type="primary">保存</el-button>
            <el-button @click="formVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>  
  export default {
    data() {
      return {
        products: [], // 存储产品列表
        formVisible: false, // 表单显示状态
        form: { // 表单数据
          id: null,
          productName: '',
          monthlyDemand: 0,
          yearlyDemand: 0
        }
      };
    },
    created() {
      this.fetchProducts(); // 页面加载时获取产品数据
    },
    methods: {
      async fetchProducts() {
        try {
          this.$axios.get('/demand/'+this.$store.getters.currentUser.id).then(
            res => {
                this.products=res.data
            }
          ) // 获取产品列表
        } catch (error) {
          console.error('获取产品列表失败:', error);
        }
      },
      async saveProduct() {
        try {
          if (this.form.id) {
            // 更新现有产品
            // await this.$axios.put(`/demand/${this.form.id}`, this.form);
            // const index = this.products.findIndex(p => p.id === this.form.id);
            // if (index !== -1) {
            //   this.$set(this.products, index, { ...this.form });
            // }
          } else {
            // 新增产品
            const response = await this.$axios.post('/demand', this.form);
            this.form.id = response.data.id; // 获取新增产品的 ID
            this.products.push(this.form);
          }
          this.formVisible = false;
        } catch (error) {
          console.error('保存产品失败:', error);
        }
      },
      async deleteProduct(productId) {
        try {
          await this.$axios.delete(`/demand/${productId}`);
          this.products = this.products.filter(p => p.id !== productId);
        } catch (error) {
          console.error('删除产品失败:', error);
        }
      },
      showForm(product = null) {
        if (product) {
          // 编辑模式
          // this.form = { ...product };
        } else {
          // 新增模式
          this.resetForm();
        }
        this.formVisible = true;
      },
      resetForm() {
        this.form = { id: null, name: '', monthlyDemand: 0, annualDemand: 0 };
      }
    }
  };
  </script>
  
  <style scoped>
  .main{
    margin: 20px;
  }
  .product-list {
    margin-top: 20px;
  }
  .card-content {
    text-align: center;
  }
  .card-content h3 {
    margin-bottom: 10px;
  }
  .card-content p {
    margin-bottom: 10px;
  }
  </style>
  